<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>相册</title>
    <!-- 引入js:script src -->
    <script src="相册/libs/jquery.js"></script>
    <script src="相册/libs/fancybox/jquery.fancybox.js"></script>
    <script src="相册/libs/fancybox/helpers/jquery.fancybox-buttons.js"></script>
    <script src="相册/libs/fancybox/helpers/jquery.fancybox-thumbs.js"></script>
    <!-- 引入css:link href -->
    <link rel="stylesheet" href="相册/libs/fancybox/jquery.fancybox.css">
    <link rel="stylesheet" href="相册/libs/fancybox/helpers/jquery.fancybox-buttons.css">
    <link rel="stylesheet" href="相册/libs/fancybox/helpers/jquery.fancybox-thumbs.css">
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            /* 设置外边距 */
            margin: 0;
            /* 溢出隐藏 */
            overflow: hidden;
            background-color: #222;
        }

        #xc div {
            width: 100px;
            height: 100px;
            border: solid 5px white;
            /* 过渡动画 */
            transition: transform 0.5s;
            border-bottom-width: 20px;
            position: relative;
        }

        #xc div:hover {
            /* 缩放 */
            transform: scale(1.5, 1.5) !important;
            /* 移动到前面 */
            z-index: 100;
        }

        #xc div a {
            /* 块元素 */
            display: block;
            width: 100px;
            height: 120px;
            text-align: center;
            text-decoration: none;
            /* position: absolute; */
            bottom: -20px;
            padding-top: 100px;
        }
    </style>
</head>

<body>
    <div id="xc">
        <div style="background-image:url(相册/images/thumbs/0.jpg)">
            <a href="相册/images/0.jpg" rel="group">放大看</a>
        </div>
        <div style="background-image:url(相册/images/thumbs/1.jpg)">
            <a href="相册/images/1.jpg" rel="group">放大看</a>
        </div>
        <div style="background-image:url(相册/images/thumbs/2.jpg)">
            <a href="相册/images/2.jpg" rel="group">放大看</a>
        </div>
        <div style="background-image:url(相册/images/thumbs/3.jpg)">
            <a href="相册/images/3.jpg" rel="group">放大看</a>
        </div>
        <div style="background-image:url(相册/images/thumbs/4.jpg)">
            <a href="相册/images/4.jpg" rel="group">放大看</a>
        </div>
        <div style="background-image:url(相册/images/thumbs/5.jpg)">
            <a href="相册/images/5.jpg" rel="group">放大看</a>
        </div>
        <div style="background-image:url(相册/images/thumbs/6.jpg)">
            <a href="相册/images/6.jpg" rel="group">放大看</a>
        </div>
        <div style="background-image:url(相册/images/thumbs/7.jpg)">
            <a href="相册/images/7.jpg" rel="group">放大看</a>
        </div>
        <div style="background-image:url(相册/images/thumbs/8.jpg)">
            <a href="相册/images/8.jpg" rel="group">放大看</a>
        </div>
        <div style="background-image:url(相册/images/thumbs/9.jpg)">
            <a href="相册/images/9.jpg" rel="group">放大看</a>
        </div>
        <div style="background-image:url(相册/images/thumbs/10.jpg)">
            <a href="相册/images/10.jpg" rel="group">放大看</a>
        </div>
        <div style="background-image:url(相册/images/thumbs/11.jpg)">
            <a href="相册/images/11.jpg" rel="group">放大看</a>
        </div>
        <div style="background-image:url(相册/images/thumbs/12.jpg)">
            <a href="相册/images/12.jpg" rel="group">放大看</a>
        </div>
        <div style="background-image:url(相册/images/thumbs/13.jpg)">
            <a href="相册/images/13.jpg" rel="group">放大看</a>
        </div>
        <div style="background-image:url(相册/images/thumbs/14.jpg)">
            <a href="相册/images/14.jpg" rel="group">放大看</a>
        </div>
        <div style="background-image:url(相册/images/thumbs/15.jpg)">
            <a href="相册/images/15.jpg" rel="group">放大看</a>
        </div>
</body>

</html>
<script>
    function Layout(params) {
        //获取屏幕的宽高
        var w = $(window).width();
        var h = $(window).height();
        //打乱
        $("#xc div").each(function () {
            var top = (Math.random() * 0.5 + 0.25) * (h - 100);
            var left = (Math.random() * 0.5 + 0.25) * (w - 100);
            $(this).css({
                "position": "absolute",
                "top": top,
                "left": left,
                "transform": "rotate(" + (Math.random() * 80 - 40) + "deg)",
            });
        });
    }
    Layout();
    //屏幕的尺寸发生变化了
    $(window).resize(function name(params) {
        Layout();
    });
    //第三方fancybox插件
    $("#xc div a").fancybox({
        //是否显示关闭按钮
        closeBtn: true,
        //自动播放
        autoPlay: true,
        //播放速度
        playSpeed: 2000,
        //打开特效
        openEffect: "elastic",
        //关闭特效
        closeEffcet: "fade",
        //辅助按钮
        helpers: {
            buttons: {},
            //缩略图          
            thumbs: { alwaysCenter: true },
        }
    });
</script>